<template>
  <!-- 专车运输 -->
  <div>
    <div class="header-fixed">
      <Header :text="text">
        <!-- 筛选条件 -->
        <section style="width: 100%">
          <div class="right" @click="handleChoose">
            <span>筛选<van-icon name="filter-o" /></span>
          </div>
        </section>
      </Header>
    </div>
    <!-- 筛选弹框 -->
    <CarChoose :show="show" @handleClose="handleClose"/>
    <!-- Content -->
    <Scroll
        class="scroll-content"
        ref="scroll"
        @pulling="loadMore"
        @pullDown="handleDown"
    >
      <CarApplyDetail
          v-for="(item,index) in list"
          :key="index"
          :carType="index"
          :class="index % 3 === 0 ? 'backColor':''"
          @click.native="handleDetail(index)"
      />
      <div class="bottom-text">-----我也是有底线的-----</div>
    </Scroll>
    <!-- 底部按钮 -->
    <div class="btn">
      <el-button style="margin: 5px 0;" type="primary" @click="handleDetail">新增申请</el-button>
    </div>
  </div>
</template>

<script>
import Header from '@/components/common/Header'
import Scroll from "@/components/common/scroll/Scroll"
import CarChoose from "@/views/transport/carTransport/components/CarChoose"
import CarApplyDetail from "@/views/transport/carTransport/components/CarApplyDetail"
export default {
  name: '',
  // 组件属性、变量
  props: {},
  // 变量
  data() {
    return {
      show: false,
      text: '',
      list: []
    }
  },
  computed: {},
  // 使用其他组件
  components: {
    Header,
    Scroll,
    CarChoose,
    CarApplyDetail
  },
  // 方法
  methods: {
    // 筛选
    handleChoose() {
      this.show = !this.show
    },
    // 关闭弹框
    handleClose() {
      this.show = false
    },
    // 加载数据
    getList() {
      if(this.list.length < 40) {
        for(let i = 0; i < 10;i++) {
          this.$msg.loading()
          setTimeout(() => {
            this.list.push(this.list.length + 1)
            this.$msg.hideLoading()
          })
        }
      }
      setTimeout(() => {
        this.$refs.scroll.finishPullUp()
        this.$refs.scroll.refresh()
      },500)
    },
    // 加载更多
    loadMore() {
      this.getList()
      this.$refs.scroll.refresh()
    },
    // 下拉刷新
    handleDown() {
      this.list = []
      this.$refs.scroll.refresh()
      this.$refs.scroll.finishPullDownRefresh()
      this.getList()
    },
    // 点击详情
    handleDetail(item) {
      console.log(item)
      this.$router.push({
        path: '/transport/approval',
        query: {
          text: '新增申请'
        }
      })
    }
  },
  // 生命周期函数
  created() {
    this.text = this.$route.query.type
    this.getList()
  },
  mounted() {
  }
}
</script>

<style scoped src="@/assets/css/transport/transportCss.css">

</style>
